<template>
    <van-nav-bar
        :title="title"
        left-text="返回"
        left-arrow
        @click-left="back"
        :right-text="right_txt"
        @click-right="editFn"
        :class="{ sticky: sticky }"
    />
</template>

<script>
export default {
    name: "Back",
    props: {
        // 标题
        title: {
            type: String,
            default: ''
        },
        // 粘性开关
        sticky: {
            type: Boolean,
            default: false
        },
        // 右边的文本
        right_txt: {
            type: String,
            default: ""
        },
        // 返回到目标路由
        target: {
            type: String,
            default: ""
        }
    },
    data() {
        return {

        }
    },
    methods: {
        //返回
        back() {
            // 返回到目标路由
            if (this.target !== "") {
                this.$router.push({ name: this.target })
                return
            }
            //返回上一级
            this.$router.back();
        },

        editFn() {
            this.$emit('edit');
        }
    },

}
</script>

<style lang="less" scoped>
.sticky {
    position: sticky;
    top: 0;
}

/deep/ .van-nav-bar__left {
    i,
    span {
        color: #0c34ba;
    }
}
</style>